<template>
  <Popup
    v-model:show="showPopup"
    :style="{
      background: 'transparent',
      overflow: 'hidden',
      height: '100vh',
      'max-width': '100vw',
    }"
    ><div class="vessel">
      <div @click="showPopup = false" class="reelect-box">
        <div class="reelect-txt">返回</div>
      </div>
      <div class="diary-box">
        <div class="panda-heard">
          <img
            v-if="isAll"
            src="@/assets/image/my-diary.png"
            class="my-diary"
            @click="tabClick"
          />
          <img
            v-if="isAll"
            src="@/assets/image/all-diary-activate.png"
            class="all-diary-activate"
            @click="tabClick"
          />
          <img
            v-if="!isAll"
            src="@/assets/image/my-diary-activate.png"
            class="my-diary-activate"
            @click="tabClick"
          />
          <img
            v-if="!isAll"
            src="@/assets/image/all-diary.png"
            class="all-diary"
            @click="tabClick"
          />
        </div>
        <div class="diary-body-box">
          <div v-if="!isAll" class="my-diary-box">
            <div class="level-box">
              <img
                :src="
                  userInfo?.appGameStudentFriendVO?.avatar?.[0]?.fileUrl ||
                  avatar
                "
                class="avatar"
              />
              <!-- <img
                src="@/assets/image/diary-pic-cut.png"
                class="diary-pic-cut"
              /> -->
              <img src="@/assets/image/diary-pic.png" class="diary-pic" />
              <div class="user-info-box">
                <div class="user-info-name">
                  {{ userInfo?.appGameStudentFriendVO?.studentName }}
                </div>
                <div class="user-info-text">
                  <div>
                    {{
                      "Lv." +
                      userInfo?.appGameStudentFriendVO?.grade +
                      "&nbsp;&nbsp;" +
                      userInfo?.appGameStudentFriendVO?.rankName
                    }}
                  </div>
                  <div>
                    {{
                      "经验值" +
                      (userInfo?.appGameStudentFriendVO?.experience || 0) +
                      "/" +
                      userInfo?.appGameStudentFriendVO?.nextLevelInfo
                        ?.experience
                    }}
                  </div>
                </div>
                <van-progress
                  :percentage="
                    userInfo?.appGameStudentFriendVO?.experience /
                    userInfo?.appGameStudentFriendVO?.currentLevelInfo
                      ?.experience
                  "
                  style="width: 177px"
                  stroke-width="4px"
                  :show-pivot="false"
                  track-color="rgba(255, 197, 0, 0.2)"
                  color="#FFC500"
                />
              </div>
            </div>
            <div class="my-diary-time-flex-box">
              <div class="flex-box-button" @click="previousPostsClick">
                上一篇
              </div>
              <div class="flex-box-text">
                {{ mytoday.format("YYYY年M月D日 dddd") }}
              </div>
              <div class="flex-box-button" @click="nextChapterClick">
                下一篇
              </div>
            </div>
            <div class="my-diary-content-item">
              <div
                class="my-diary-content-box"
                v-for="item in diaryInfo"
                :key="item?.desc"
              >
                <img
                  :src="
                    userInfo?.appGameStudentFriendVO?.avatar?.[0]?.fileUrl ||
                    avatar
                  "
                  class="user-avatar"
                />
                <div class="user-message">
                  <div class="text">{{ item?.desc }}</div>
                </div>
                <div v-if="item?.actionList.length" class="user-behavior-box">
                  <div
                    class="behavior-flex-box"
                    v-for="actionItem in item.actionList"
                  >
                    <div class="behavior-text">
                      {{ actionItem?.identifyResult }}
                    </div>
                    <div class="progress-bar">
                      <div
                        class="progress-content"
                        :style="{
                          width: `${Math.min(
                            (actionItem.count / 1000) * 100,
                            100
                          )}%`,
                        }"
                      ></div>
                    </div>
                    <div class="ratio">{{ `${actionItem.count}/1000` }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="all-diary-box">
            <div class="my-diary-time-flex-box">
              <div class="flex-box-button" @click="lastMonthClick">
                {{ lastMonthFun() + "月份" }}
              </div>
              <div class="flex-box-text" @click="timeSelectShow = true">
                {{ today.format("YYYY年M月") }}
                <img src="@/assets/image/triangle.png" class="triangle" />
              </div>
              <div class="flex-box-button" @click="nextMonthClick">
                {{ nextMonthFun() + "月份" }}
              </div>
            </div>
            <div class="calendar-week-box">
              <div v-for="item in weekdays" :key="item" class="items-box">
                {{ item }}
              </div>
            </div>
            <div class="calendar-day-box">
              <div
                v-for="(item, index) in daysInMonth"
                :key="index"
                :class="{
                  'items-box-activate': item.isSign && !item.isNaN,
                  'items-box-nan': item.isNaN,
                  'items-box-rest': !item.isSign && !item.isNaN,
                  'items-box-today': item.isToday && item.isSign && !item.isNaN,
                }"
                @click="signClick(item.day)"
              >
                <div>
                  <div class="calendar-day-text">{{ item.day }}</div>
                  <img
                    v-if="item.isSign && !item.isNaN && !item.isToday"
                    src="@/assets/image/right.png"
                    class="right"
                  />
                  <div
                    v-else-if="item.isToday && item.isSign && !item.isNaN"
                    class="calendar-today-status"
                  >
                    {{ "今日" }}
                  </div>
                  <div
                    v-else-if="item.isDayOff && !item.isNaN"
                    class="calendar-day-status"
                  >
                    {{ "休" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>
<script lang="ts" setup>
import avatar from "@/assets/svg/avatar.svg";
// 从 vant 库导入 Popup 组件和 showToast 方法
import { Popup, showToast } from "vant";
// 从 vue 库导入响应式相关的 API
import { computed, ref, watch } from "vue";
// 导入 dayjs 库用于日期处理
import dayjs from "dayjs";
// 导入 dayjs 的中文语言包
import "dayjs/locale/zh-cn";
// 从 API 模块导入相关接口方法
import {
  getDayOffData,
  getDiaryDetails,
  getDiaryList,
  getMyDetails,
  postSignIn,
} from "@/api/common";
import { useMainStore } from "@/store";

// 设置 dayjs 的语言为中文
dayjs.locale("zh-cn");

/**
 * 控制日期选择器的显示与隐藏
 */
const timeSelectShow = ref(false);

/**
 * 从父组件接收的 showPopup 模型，用于控制弹窗的显示与隐藏
 */
const showPopup = defineModel<boolean>("showPopup");

/**
 * 控制显示我的日记还是全部日记，false 表示我的日记，true 表示全部日记
 */
const isAll = ref(false);

/**
 * 我的日记当前显示的日期
 */
const mytoday = ref(dayjs());

/**
 * 全部日记当前显示的日期
 */
const today = ref(dayjs());

/**
 * 一周的星期列表
 */
const weekdays = ["日", "一", "二", "三", "四", "五", "六"];

/**
 * 分页信息对象
 */
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  searchCount: true,
  studentId: "",
  occurTime: "",
  schoolId: "",
  actionTypeList: [],
});

/**
 * 行为类型枚举，定义不同的行为及其对应的中文描述
 */
enum ActionType {
  "RAISE_HAND" = "举手",
  "THINK" = "思考",
  "WANDER" = "走神",
  "DOZE_OFF" = "打盹",
}

/**
 * 每日签到列表
 */
const daySignList = ref();

/**
 * 休息日列表
 */
const dayOffList = ref([]);

/**
 * 用户信息
 */
const userInfo = ref();
const studentId = ref();

/**
 * 日记信息列表
 */
const diaryInfo = ref([] as any);
/**
 * 点击上一篇日记的处理函数，将日期往前推一天并获取对应日记信息
 */
function previousPostsClick() {
  mytoday.value = dayjs(mytoday.value).subtract(1, "day");
  getDiaryInfo(mytoday.value.format("YYYY-MM-DD"));
}

/**
 * 点击下一篇日记的处理函数，将日期往后推一天并获取对应日记信息
 */
function nextChapterClick() {
  mytoday.value = dayjs(mytoday.value).add(1, "day");
  getDiaryInfo(mytoday.value.format("YYYY-MM-DD"));
}

/**
 * 点击日期进行签到的处理函数，仅在点击今天的日期时执行签到操作
 * @param day - 点击的日期
 */
function signClick(day: string) {
  const today = dayjs();
  if (day == today.format("D")) {
    const data = {
      studentId: pagination.value.studentId,
      signInDate: today.format("YYYY-MM-DD"),
    };
    postSignIn(data).then(() => {
      // 显示签到成功的提示信息
      showToast("日记签到成功");
    });
  }
}

/**
 * 计算当前月份的第一天是星期几
 */
const firstDayOfMonth = computed(() => {
  return today.value.add(2, "day").startOf("month").day();
});

/**
 * 计算当前月份的日期列表，包含日期信息、是否为今天、是否签到、是否为休息日等
 */
const daysInMonth = computed(() => {
  const startOfMonth = today.value.startOf("month");
  const endOfMonth = today.value.endOf("month");
  const days = [];
  for (
    let day = startOfMonth;
    day.isBefore(endOfMonth, "day");
    day = day.add(1, "day")
  ) {
    // 默认不为休息日
    let isDayOff = null;
    // 如果 dayOffList 不为空，则检查 dayOffList
    if (dayOffList.value && dayOffList.value.length > 0) {
      dayOffList.value.forEach((item: any) => {
        if (day.isSame(dayjs(item.date), "day")) {
          isDayOff = item.holiday; // 如果匹配到休息日，设置 isDayOff 为 holiday 的值
        }
      });
    }
    // 如果没有在 dayOffList 中匹配到，则检查是否为周六或周日
    if (isDayOff == null) {
      isDayOff = day.day() === 0 || day.day() === 6; // 如果是周末，设置为休息日
    }
    // 将日期信息推入 days 数组
    days.push({
      day: day.format("D"),
      isToday: day.isSame(dayjs(), "day"),
      isSign: daySignList.value?.includes(day.format("YYYY-MM-DD")),
      isDayOff: isDayOff,
    });
  }
  // 处理上个月的空白日
  for (let i = 0; i < firstDayOfMonth.value; i++) {
    days.unshift({ day: "", isNaN: true });
  }
  return days;
});

/**
 * 点击下一个月的处理函数，更新当前日期并获取对应月份的休息日信息
 */
function nextMonthClick() {
  today.value = dayjs(today.value).add(1, "month");
  const month = today.value.format("YYYY-MM");
  getDayOff(month);
}

/**
 * 获取指定月份的休息日信息
 * @param month - 指定的月份，格式为 'YYYY-MM'
 */
function getDayOff(month: string) {
  getDayOffData(month).then((res) => {
    dayOffList.value = res.data;
  });
}

/**
 * 点击上一个月的处理函数，更新当前日期并获取对应月份的休息日信息
 */
function lastMonthClick() {
  today.value = dayjs(today.value).subtract(1, "month");
  const month = today.value.format("YYYY-MM");
  getDayOff(month);
}

/**
 * 获取下一个月的月份数
 * @returns 下一个月的月份数，格式为 'MM'
 */
function nextMonthFun() {
  const month = dayjs(today.value).add(1, "month").format("MM");
  return month;
}

/**
 * 获取上一个月的月份数
 * @returns 上一个月的月份数，格式为 'MM'
 */
function lastMonthFun() {
  const month = dayjs(today.value).subtract(1, "month").format("MM");
  return month;
}

/**
 * 切换我的日记和全部日记的处理函数，根据切换结果获取相应的数据
 */
function tabClick() {
  isAll.value = !isAll.value;
  if (!isAll.value) {
    getUserInfo();
    getDiaryInfo(mytoday.value.format("YYYY-MM-DD"));
  } else {
    getDayOff(today.value.format("YYYY-MM"));
    getDiaryList(
      today.value.format("YYYY-MM"),
      pagination.value.studentId
    ).then((res) => {
      daySignList.value = res.data.signInDate;
    });
  }
}

/**
 * 获取指定日期的日记信息
 * @param month - 指定的日期，格式为 'YYYY-MM-DD'
 */
function getDiaryInfo(month: string) {
  const data = {
    studentId: pagination.value.studentId,
    occurTime: month,
    schoolId: "",
  };
  getDiaryDetails(data).then((res) => {
    if (res.data?.length == 0) {
      diaryInfo.value = [
        {
          actionList: [],
          desc: "啊哦~今天我休息喔~",
        },
      ];
    } else {
      diaryInfo.value = [];
      console.log(res.data);
      res.data.forEach((item: { goodOrBad: string; count: number }) => {
        if (item.goodOrBad == "good") {
          diaryInfo.value[0] = {
            actionList: [],
            desc: `今天我上课超级认真的喔，快来夸夸我叭~~`,
          };
          diaryInfo.value[0].actionList.push(item);
        } else {
          diaryInfo.value[1] = {
            actionList: [],
            desc: `当然啦，我偶尔也会有开小差的时候>-<请多多鼓励我叭！加油鸭~~`,
          };
          diaryInfo.value[1].actionList.push(item);
        }
      });
    }
    // 过滤掉 null 元素
    diaryInfo.value = diaryInfo.value.filter((item: null) => item != null);
  });
}

/**
 * 获取用户信息
 */
function getUserInfo() {
  getMyDetails(studentId.value).then((res) => {
    userInfo.value = res.data;
  });
}

/**
 * 监听 showPopup 的变化，当弹窗显示时初始化数据
 */
watch(showPopup, (newValue) => {
  if (!newValue) return;
  init();
});

/**
 * 初始化数据的函数，根据当前显示状态获取相应的数据
 */
function init() {
  const mainStore = useMainStore();
  studentId.value = mainStore.studentInfo?.studentId;
  pagination.value.studentId = studentId.value;
  const month = today.value.format("YYYY-MM");
  if (!isAll.value) {
    getUserInfo();
    getDiaryInfo(mytoday.value.format("YYYY-MM-DD"));
  } else {
    getDayOff(month);
    getDiaryList(month, pagination.value.studentId).then((res) => {
      daySignList.value = res.data.signInDate;
    });
  }
}
</script>
<style lang="scss" scoped>
.vessel {
  width: 100vw;
  height: 100vh;
  .panda-heard {
    position: absolute;
    top: -53px;
    width: 100vw;
    right: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    .all-diary {
      width: 92px;
      height: 85px;
    }
    .my-diary {
      width: 92px;
      height: 85px;
    }
    .all-diary-activate {
      width: 125px;
      height: 118px;
    }
    .my-diary-activate {
      width: 125px;
      height: 118px;
    }
  }
  .diary-box {
    position: relative;
    margin: 65px auto 0;
    padding: 10px;
    width: 315px;
    height: calc(606 / 812 * 100vh);
    border-radius: 30px;
    opacity: 1;
    background: #b26e3d;
    box-shadow: inset -1px -1px 5px 0px #532402, inset 1px 1px 5px 0px #ecd7c7;
    .diary-body-box {
      width: 315px;
      height: 100%;
      border-radius: 30px;
      opacity: 1;
      background: #f6f6f6;
      box-shadow: 0px 0px 10px 0px #9d5b2d;
      .my-diary-content-item {
        width: 287px;
        display: flex;
        flex-direction: column;
        padding: 0 10px 0 10px;
        gap: 20px;

        .my-diary-content-box {
          position: relative;
          width: 100%;
          .user-behavior-box {
            margin: 10px 0 0 0;
            width: 295px;
            min-height: 100px;
            border-radius: 20px;
            background: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            .behavior-flex-box {
              display: flex;
              justify-items: center;
              align-items: center;
              gap: 9px;
              .behavior-text {
                font-family: Source Han Sans;
                font-size: 14px;
                font-weight: 350;
                line-height: 22px;
                letter-spacing: 0px;
                color: #333333;
              }
              .progress-bar {
                width: 147px;
                height: 20px;
                border-radius: 0px 100px 100px 0px;
                background: rgba(255, 197, 0, 0.2);
                .progress-content {
                  width: 0;
                  height: 20px;
                  border-radius: 0px 100px 100px 0px;
                  background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
                }
              }
              .ratio {
                font-family: Source Han Sans;
                font-size: 12px;
                font-weight: 350;
                line-height: 20px;
                text-align: right;
                letter-spacing: 0px;
                color: #666666;
              }
            }
          }
          .user-message {
            border-radius: 0px 10px 10px 10px;
            background: #ffffff;
            box-sizing: border-box;
            min-width: 159px;
            min-height: 53px;
            border: 1px solid #ac6e43;
            position: absolute;
            top: 0;
            left: 46px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            .text {
              font-size: 14px;
              font-weight: 350;
              line-height: 19.6px;
              letter-spacing: 0px;
              color: #874014;
              text-align: center;
              padding: 2px;
            }
          }
          .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
        }
      }
      .all-diary-box {
        width: 100%;
        height: 100%;
        padding: 74px 0 0 0;
        .sign-status-title {
          margin: 30px 0 0 16px;
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: 350;
          line-height: 22px;
          letter-spacing: 0px;
          color: #333333;
        }
        .calendar-day-box {
          width: 287px;
          display: flex;
          margin: 10px auto;
          justify-content: flex-start;
          flex-wrap: wrap;
          .items-box-nan {
            width: 35px;
            height: 35px;
            margin: 3px;
            border-radius: 5px;
            opacity: 1;
            background: rgba(255, 197, 0, 0.2);
            box-sizing: border-box;
            border: 1px solid #ffffff;
            opacity: 0;
          }
          .items-box-rest {
            width: 35px;
            height: 35px;
            margin: 3px;
            border-radius: 5px;
            opacity: 1;
            background: rgba(255, 197, 0, 0.2);
            box-sizing: border-box;
            border: 1px solid #ffffff;
            position: relative;
            .right {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 0;
              right: 0;
            }
            .calendar-day-status {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 0;
              right: 0;
              opacity: 1;
              border-radius: 50%;
              background: #ffffff;
              border: 2px solid #ffc500;
              font-family: Source Han Sans;
              font-size: 12px;
              font-weight: 500;
              line-height: 22px;
              text-align: center;
              letter-spacing: 0px;
              font-variation-settings: "opsz" auto;
              color: #ffc500;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .calendar-day-text {
              position: absolute;
              top: 0;
              left: 3px;
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: 350;
              line-height: 22px;
              text-align: center;
              letter-spacing: 0px;
              color: #333333;
            }
          }
          .items-box-activate {
            width: 35px;
            height: 35px;
            margin: 3px;
            border-radius: 5px;
            opacity: 1;
            background: #ffc500;
            box-sizing: border-box;
            border: 1px solid #ffffff;
            position: relative;
            .right {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 0;
              right: 0;
            }
            .calendar-day-status {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 0;
              right: 0;
              opacity: 1;
              border-radius: 50%;
              background: #ffffff;
              border: 2px solid #ffc500;
              font-family: Source Han Sans;
              font-size: 12px;
              font-weight: 500;
              line-height: 22px;
              text-align: center;
              letter-spacing: 0px;
              font-variation-settings: "opsz" auto;
              color: #ffc500;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .calendar-day-text {
              position: absolute;
              top: 0;
              left: 3px;
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: 350;
              line-height: 22px;
              text-align: center;
              letter-spacing: 0px;
              color: #333333;
            }
          }
          .items-box-today {
            width: 35px;
            height: 35px;
            margin: 3px;
            border-radius: 5px;
            opacity: 1;
            background: #ffc500;
            box-sizing: border-box;
            border: 1px solid #ff3a03;
            position: relative;
            .right {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 0;
              right: 0;
            }
            .calendar-today-status {
              position: absolute;
              bottom: -1px;
              right: -1px;
              width: calc(100% + 2px);
              height: 16px;
              background: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              box-sizing: border-box;
              border: 1px solid #ff3a03;
              font-family: Source Han Sans;
              font-size: 12px;
              font-weight: 500;
              line-height: 22px;
              text-align: center;
              letter-spacing: normal;
              color: #ff3a03;
            }
          }
        }
        .calendar-week-box {
          width: 287px;
          display: flex;
          padding: 4px;
          margin: -10px auto;
          justify-content: space-around;
          .items-box {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #333333;
          }
        }

        .my-diary-time-flex-box {
          width: 295px;
          margin: 20px auto;
          height: 42px;
          padding: 4px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-radius: 10px;
          opacity: 1;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
          .flex-box-button-sign {
            width: 90px;
            height: 34px;
            border-radius: 5px;
            opacity: 1;
            background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
            box-shadow: inset -1px -1px 2px 0px #d89f37,
              inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .flex-box-button-rest {
            width: 90px;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            opacity: 1;
            background: linear-gradient(
              90deg,
              rgba(255, 197, 0, 0.3) 0%,
              rgba(255, 178, 0, 0.3) 100%
            );
            box-shadow: inset -1px -1px 2px 0px #d89f37,
              inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #af8000;
          }
          .flex-box-text {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #333333;
            .triangle {
              width: 10px;
              height: 8px;
            }
          }
          .flex-box-button {
            width: 59px;
            height: 34px;
            border-radius: 5px;
            opacity: 1;
            background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
            box-shadow: inset -1px -1px 2px 0px #d89f37,
              inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .my-diary-box {
        width: 100%;
        height: 100%;
        padding: 74px 0 0 0;
        .my-diary-time-flex-box {
          width: 287px;
          margin: 20px auto;
          height: 42px;
          padding: 4px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-radius: 10px;
          opacity: 1;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
          .flex-box-text {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #333333;
          }
          .flex-box-button {
            width: 59px;
            height: 34px;
            border-radius: 5px;
            opacity: 1;
            background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
            box-shadow: inset -1px -1px 2px 0px #d89f37,
              inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .level-box {
          position: relative;
          width: 295px;
          height: 72px;
          margin: 0 auto;
          border-radius: 10px;
          opacity: 1;
          box-sizing: border-box;
          border: 2px solid #ac6e43;
          .user-info-box {
            width: 177px;
            height: 51px;
            position: absolute;
            top: 6px;
            right: 17px;
            .user-info-name {
              height: 32px;
              font-size: 18px;
              font-weight: 500;
              line-height: 32px;
              letter-spacing: normal;
              color: #874014;
            }
            .user-info-text {
              font-size: 12px;
              font-weight: 350;
              line-height: 20px;
              letter-spacing: normal;
              color: rgba(135, 64, 20, 0.7);
              display: flex;
              align-items: center;
              justify-content: space-between;
              white-space: nowrap;
            }
          }
          .avatar {
            z-index: 2;
            position: absolute;
            width: 70px;
            height: 70px;
          }
          .diary-pic {
            width: 125px;
            height: 125px;
            position: absolute;
            left: -25px;
            top: -30px;
          }
          .diary-pic-cut {
            width: 23px;
            height: 23px;
            position: absolute;
            bottom: -3px;
            left: -3px;
            z-index: 3;
          }
        }
      }
    }
  }
  .reelect-box {
    margin: calc(10px + var(--dynamic-top)) 0 0 20px;
    width: 64px;
    height: 28px;
    background: url("@/assets/image/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .reelect-txt {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      margin: 0 0 0 20px;
      text-align: center;
    }
  }
}
</style>
